import React from "react";
import { Input, Modal } from "antd";

export const Compress = ({
  imageUrl,
  quality,
  isModalOpen,
  handleOk,
  handleCancel,
}) => {
  return (
    <div>
      <Modal
        title="图片压缩"
        open={isModalOpen}
        cancelText="取消"
        okText="压缩"
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <img src={imageUrl} alt="avatar" style={{ width: "100%" }} />
        <div style={{ display: "flex", alignItems: "center" }}>
          压缩等级:
          <Input
            style={{ flex: "1" }}
            value={quality}
            placeholder="范围1-99,默认为1"
            allowClear
            maxLength="2"
          />
        </div>
      </Modal>
    </div>
  );
};
